<template>
    <div class="app-container">
        <h3>申诉内容</h3>
        <el-form ref="complaintOrder" :model="complaintOrder" label-width="120px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="申诉单号:">
                        <span>{{complaintOrder.id}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="姓名:">
                        <span>{{complaintOrder.createdUserName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="申诉类型:">
                        <span>{{complaintOrder.complaintType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="申诉时间:">
                        <span>{{complaintOrder.createdDate}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="状态:">
                        <span>{{complaintOrder.statusName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3>诉求描述</h3>
        <div>
            <el-form label-width="120px">
                <el-form-item label="文字描述:" v-if="complaintOrder.complaintReason">
                    <div class="textwarp">
                        <span>{{complaintOrder.complaintReason}}</span>
                    </div>
                </el-form-item>
                <el-form-item label="图片描述:" v-if="complaintOrder.imageList.length>0">
                    <div class="imagewarp">
                        <div v-for="imageItem in complaintOrder.imageList">
                            <img :src="baseUrl+imageItem.imageUrl" class="imageItem"
                                 @click="showImg(baseUrl+imageItem.imageUrl)"></img>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <div v-if="complaintOrder.statusId !=='10'">
            <h3>申诉处理</h3>
            <div v-for="replyItem in replyList" class="">
                <h4>{{replyItem.createdUserName}}回复： {{replyItem.createdDate}}</h4>
                <el-form label-width="120px">
                    <el-form-item label="文字回复:" v-if="replyItem.complaintReason">
                        <div class="textwarp">
                            <span>{{replyItem.complaintReason}}</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="图片回复:" v-if="replyItem.imageList.length>0">
                        <div class="imagewarp">
                            <div v-for="imageItem in replyItem.imageList">
                                <img class="imageItem" :src="baseUrl+imageItem.imageUrl"
                                     @click="showImg(baseUrl+imageItem.imageUrl)">
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
                <div class="divider">
                </div>
            </div>
        </div>
        <div class="app-container-footer" v-if="complaintOrder.statusId !=='1000'">
            <el-button type="primary" style="width: 100px;" @click="showReply=true">回复</el-button>
        </div>

        <el-dialog title="回复申诉" :visible.sync="showReply" top="10vh">
            <el-form :model="replyOrder" label-width="120px">
                <el-form-item label="回复内容">
                    <el-input type="textarea" :rows="3" v-model="replyOrder.complaintReason"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传图片">
                    <el-upload
                            :action="uploadUrl"
                            list-type="picture-card"
                            :limit="10"
                            :on-exceed="handleExceed"
                            :on-preview="showVoucherImg"
                            :on-remove="handleRemove"
                            :file-list="imageList"
                            :on-success="handleSuccess">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="showReply = false">取 消</el-button>
                    <el-button type="primary" @click="saveOrderReply">确 定</el-button>
                  </span>
        </el-dialog>


        <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
            <div class="viewImg">
                <img :src="imgUrl" style="width:100%;height: auto">
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import { getDetail, saveReply } from '@/api/complaintOrderApi'

  export default {
    name: 'detail',
    data() {
      return {
        uploadUrl: process.env.BASE_API + '/orderTruckImage/upload',
        baseUrl: process.env.IMG_BASE_URL,
        complaintOrder: {},
        replyList: [],
        showReply: false,
        replyOrder: {},
        dialogImgFormVisible: false,
        imageList: [],
        imgUrl: ''

      }
    },
    methods: {
      showTruckCenterDetail(truckCenterId) {
        sessionStorage.setItem('truckCenterId', truckCenterId)
        this.$router.push('/truckorder/truckcenterdetail')
      },
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      showVoucherImg(event) {
        const { url } = event
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      saveOrderReply() {
        if (!this.replyOrder.complaintReason && this.imageList.length === 0) {
          this.$message.warning('回复内容不能都为空')
          return false
        }
        let formData = {
          mainId: this.orderId,
          complaintReason: this.replyOrder.complaintReason,
          imageList: this.imageList
        }
        saveReply(formData).then(res => {
          if (!res.hasError) {
            this.$message.success('回复成功！')
            this.replyOrder = {}
            this.imageList = []
            this.queryData()
          }
        })
        this.showReply = false
      },
      handleExceed() {
        this.$message.warning('最多上传10个文件！')
      },
      handleRemove(event) {
        const { url } = event
        let imgList = []
        this.imageList.forEach(voucher => {
          if (voucher.url !== url) {
            imgList.push(voucher)
          }
        })
        this.imageList = imgList
      },
      handleSuccess(res) {
        let imgList = this.imageList
        imgList.push({ url: this.baseUrl + res.data, imageUrl: res.data, imageTypeId: 'COMPLAINT' })
        this.imageList = imgList
      },
      queryData() {
        getDetail(this.orderId).then(response => {
          if (!response.hasError) {
            const { result = {} } = response
            this.complaintOrder = result
            if (result.replyList && result.replyList.length > 0) {
              this.replyList = result.replyList
            }
          }
        })
      }
    },
    mounted() {
      let orderId = sessionStorage.getItem('complaintOrderId')
      this.orderId = orderId
      this.queryData()
    }
  }
</script>

<style scoped>

    .imageItem {
        width: 100px;
        margin-right: 10px;
    }

    .app-container-footer {
        margin-top: 50px;
    }

    .textwarp {
        width: 80%;
    }

    .imagewarp {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        align-items: center;
    }

    .divider {
        height: 10px;
        width: 80%;
        background-color: #99a9bf;
    }
</style>
